<template>
  <div id="app">
    <Header :seller="seller"></Header>
    <div class="tab">
      <router-link to="goods" class="tab-item">商品</router-link>
      <router-link to="ratings" class="tab-item">评价</router-link>
      <router-link to="seller" class="tab-item">商家</router-link>
    </div>
    <router-view :seller = "seller" keep-alive></router-view>
  </div>
</template>

<script>
import Header from './components/header/header'
export default {
  name: 'App',
  data() {
    return {
      seller:{},
    }
  },
  methods:{
    getData(){
      this.$axios.get('static/data.json').then((res)=>{
        this.seller = res.data.seller
        //console.log(this.seller)
      })
    }
  },
  mounted(){
    this.getData()
  },
  components:{
    Header
  }
}
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import './common/stylus/mixin.styl'
#app
  .tab
    display : flex
    height : 40px
    width: 100%
    line-height : 40px
    border-1px(rgba(7,17,27,0.1))
    .tab-item
      flex : 1
      text-align : center
      display : block
      font-size : 14px
      color :rgb(77,85,93)
    & > .active 
      color rgb(240,20,20)
    
</style>